<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>统计分析</title>
    <link rel="stylesheet" href="/app/admin/component/pear/css/pear.css" />
    <link rel="stylesheet" href="/app/admin/admin/css/reset.css" />
    <link rel="stylesheet" href="/app/admin/component/layui/css/layui.css" />
    <style>
        .main-container {
            padding: 15px 15px 15px 75px;
            background: #f2f2f2;
            min-height: 100vh;
        }
        .stat-box {
            background: #fff;
            padding: 20px;
            border-radius: 4px;
            margin-bottom: 15px;
        }
        .stat-title {
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
        }
        .filter-box {
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <?php include base_path() . '/plugin/ky_shouyin/app/view/layout/topmenu.html'; ?>
    <?php include base_path() . '/plugin/ky_shouyin/app/view/layout/admin_leftmenu.html'; ?>
    
    <div class="main-container">
        <!-- 销售统计 -->
        <div class="stat-box">
            <div class="stat-title">销售统计</div>
            <div class="filter-box">
                <form class="layui-form" lay-filter="salesFilterForm">
                    <div class="layui-row layui-col-space10">
                        <div class="layui-col-md3">
                            <div class="layui-form-item">
                                <label class="layui-form-label">统计类型</label>
                                <div class="layui-input-block">
                                    <select name="type" lay-filter="salesType">
                                        <option value="day">按日统计</option>
                                        <option value="month">按月统计</option>
                                        <option value="year">按年统计</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md6">
                            <div class="layui-form-item">
                                <label class="layui-form-label">日期范围</label>
                                <div class="layui-input-block">
                                    <input type="text" name="date_range" id="salesDateRange" placeholder="请选择日期范围" class="layui-input">
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md3">
                            <div class="layui-form-item">
                                <div class="layui-input-block" style="margin-left: 0;text-align: right;">
                                    <button class="layui-btn" lay-submit lay-filter="searchSales">搜索</button>
                                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div id="salesChart" style="height: 400px;"></div>
        </div>

        <!-- 会员统计 -->
        <div class="stat-box">
            <div class="stat-title">会员统计</div>
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md6">
                    <div id="memberLevelChart" style="height: 300px;"></div>
                </div>
                <div class="layui-col-md6">
                    <div id="memberGrowthChart" style="height: 300px;"></div>
                </div>
            </div>
        </div>

        <!-- 支付方式统计 -->
        <div class="stat-box">
            <div class="stat-title">支付方式统计</div>
            <div class="filter-box">
                <form class="layui-form" lay-filter="paymentFilterForm">
                    <div class="layui-row layui-col-space10">
                        <div class="layui-col-md6">
                            <div class="layui-form-item">
                                <label class="layui-form-label">日期范围</label>
                                <div class="layui-input-block">
                                    <input type="text" name="date_range" id="paymentDateRange" placeholder="请选择日期范围" class="layui-input">
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md3">
                            <div class="layui-form-item">
                                <div class="layui-input-block" style="margin-left: 0;text-align: right;">
                                    <button class="layui-btn" lay-submit lay-filter="searchPayment">搜索</button>
                                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div id="paymentChart" style="height: 300px;"></div>
        </div>
    </div>

    <script src="/app/admin/component/layui/layui.js"></script>
    <script src="/app/admin/component/pear/pear.js"></script>
    <script src="/app/admin/component/echarts/echarts.min.js"></script>
    <script>
    layui.use(['form', 'laydate', 'layer'], function(){
        var form = layui.form
            ,laydate = layui.laydate
            ,layer = layui.layer
            ,$ = layui.$;
        
        // 初始化日期选择器
        laydate.render({
            elem: '#salesDateRange'
            ,type: 'date'
            ,range: true
        });
        laydate.render({
            elem: '#paymentDateRange'
            ,type: 'date'
            ,range: true
        });

        // 初始化销售统计图表
        var salesChart = echarts.init(document.getElementById('salesChart'));
        salesChart.setOption({
            title: {
                text: '销售趋势'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['销售额', '订单数']
            },
            xAxis: {
                type: 'category',
                data: []
            },
            yAxis: [
                {
                    type: 'value',
                    name: '销售额',
                    axisLabel: {
                        formatter: '¥{value}'
                    }
                },
                {
                    type: 'value',
                    name: '订单数',
                    axisLabel: {
                        formatter: '{value}'
                    }
                }
            ],
            series: [
                {
                    name: '销售额',
                    type: 'line',
                    data: []
                },
                {
                    name: '订单数',
                    type: 'bar',
                    yAxisIndex: 1,
                    data: []
                }
            ]
        });

        // 初始化会员等级分布图表
        var memberLevelChart = echarts.init(document.getElementById('memberLevelChart'));
        memberLevelChart.setOption({
            title: {
                text: '会员等级分布'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{b}: {c} ({d}%)'
            },
            series: [
                {
                    type: 'pie',
                    radius: '60%',
                    data: []
                }
            ]
        });

        // 初始化会员增长趋势图表
        var memberGrowthChart = echarts.init(document.getElementById('memberGrowthChart'));
        memberGrowthChart.setOption({
            title: {
                text: '会员增长趋势'
            },
            tooltip: {
                trigger: 'axis'
            },
            xAxis: {
                type: 'category',
                data: []
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    type: 'line',
                    data: []
                }
            ]
        });

        // 初始化支付方式统计图表
        var paymentChart = echarts.init(document.getElementById('paymentChart'));
        paymentChart.setOption({
            title: {
                text: '支付方式分布'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{b}: ¥{c} ({d}%)'
            },
            series: [
                {
                    type: 'pie',
                    radius: '60%',
                    data: []
                }
            ]
        });

        // 加载销售统计数据
        function loadSalesData(params) {
            $.ajax({
                url: '/app/ky_shouyin/admin/statistics/sales',
                data: params,
                success: function(res){
                    if(res.code === 0) {
                        salesChart.setOption({
                            xAxis: {
                                data: res.data.dates
                            },
                            series: [
                                {
                                    data: res.data.amounts
                                },
                                {
                                    data: res.data.orders
                                }
                            ]
                        });
                    }
                }
            });
        }

        // 加载会员统计数据
        function loadMemberData() {
            $.ajax({
                url: '/app/ky_shouyin/admin/statistics/member',
                success: function(res){
                    if(res.code === 0) {
                        // 更新会员等级分布
                        memberLevelChart.setOption({
                            series: [{
                                data: res.data.levels
                            }]
                        });
                        // 更新会员增长趋势
                        memberGrowthChart.setOption({
                            xAxis: {
                                data: res.data.growth.dates
                            },
                            series: [{
                                data: res.data.growth.numbers
                            }]
                        });
                    }
                }
            });
        }

        // 加载支付方式统计数据
        function loadPaymentData(params) {
            $.ajax({
                url: '/app/ky_shouyin/admin/statistics/payment',
                data: params,
                success: function(res){
                    if(res.code === 0) {
                        paymentChart.setOption({
                            series: [{
                                data: res.data
                            }]
                        });
                    }
                }
            });
        }

        // 初始加载数据
        loadSalesData({});
        loadMemberData();
        loadPaymentData({});

        // 销售统计搜索
        form.on('submit(searchSales)', function(data){
            loadSalesData(data.field);
            return false;
        });

        // 支付方式统计搜索
        form.on('submit(searchPayment)', function(data){
            loadPaymentData(data.field);
            return false;
        });

        // 窗口大小改变时重绘图表
        window.addEventListener('resize', function() {
            salesChart.resize();
            memberLevelChart.resize();
            memberGrowthChart.resize();
            paymentChart.resize();
        });
    });
    </script>
</body>
</html> 